<template>
  <hm-layout :needHeader="false">
    <view class="login-container">
      <view class="account-wrap">
        <view class="login-mobile">
          <view class="account-header">登录海米AI</view>
          <view class="account-form">
            <view class="account-input-row">
              <el-input size="large" v-model="phoneNumber" placeholder="请输入手机号" clearable />
            </view>
            <view class="account-input-row code-input-row">
              <el-input class="code-input" size="large" v-model="code" placeholder="验证码" />
              <view class="send-code">
                <view class="code-btn" @click="sendSmsCode('login')">{{ btnTitle }}</view>
              </view>
            </view>
          </view>
          <el-button size="large" class="login-btn" type="primary" @click="loginBySms">登录</el-button>
        </view>
      </view>
    </view>
  </hm-layout>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const vk = uni.vk;

  let phoneNumber = ref('')
  let code = ref('')
  let btnTitle = ref('获取验证码')
  let btnDisabled = ref(false)
  
  const loginBySms = () => {
  	vk.userCenter.loginBySms({
  		data:{
        mobile: phoneNumber.value,
        code: code.value
      },
  		success: (data) => {
        console.log(data)
        if (data.type === 'register') {
          let inviteCode = uni.getStorageSync('inviteCode')
          if (inviteCode) {
            vk.callFunction({
            	url: 'client/user/kh/acceptInvite',
            	title: 'loading...',
            	data: {
            		inviteCode,
            	},
            	success: (data) => {
                setTimeout(() => {
                	login_success(data);
                },100);
            	},
              fail: () => {
                setTimeout(() => {
                	login_success(data);
                },100);
              }
            });
          } else {
            setTimeout(() => {
            	login_success(data);
            },100);
          }
        } else {
          setTimeout(() => {
          	login_success(data);
          },100);
        }
  		}
  	});
  }
  
  const login_success = (data) => {
  	// 检查是否有指定跳转的页面
  	if(vk.navigate.getOriginalPage()){
  		vk.navigate.originalTo();
  		return false;
  	}
  	// 跳转到首页,或页面返回
  	var pages = getCurrentPages();
  	console.log(pages.length,pages[pages.length-1].route);
  	if(pages.length > 1
  		&& pages[pages.length-2]
  		&& pages[pages.length-2].route
  		&& pages[pages.length-2].route.indexOf('login/index') == -1
  	){
  		// const eventChannel = that.getOpenerEventChannel();
  		// eventChannel.emit('loginSuccess', {});
  		vk.navigateBack();
  	}else{
  		// 进入首页
  		vk.navigateToHome();
  	}
  }
  let sendSmsCode = (type) => {
    if (btnDisabled.value) return;
    let that = this;
    if (!/^1\d{10}$/.test(phoneNumber.value)) {
      uni.showModal({
        content: '请输入正确的手机号',
        showCancel: false
      })
      return
    }
    vk.userCenter.sendSmsCode({
      data: {
        mobile: phoneNumber.value,
        type: type,
      },
      success: (data) => {
        validateBtn()
        vk.alert("短信发送成功");
      }
    });
  }
  const validateBtn = () => {
    //倒计时
    let time = 60;
    let timer = setInterval(() => {
      if (time == 0) {
        clearInterval(timer);
        btnDisabled.value = false;
        btnTitle.value = "获取验证码";
      } else {
        btnTitle.value = time + '秒后重试';
        btnDisabled.value = true;
        time--
      }
    }, 1000)
  }
</script>
<style lang="scss" scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    background: url('/static/login-page-bg.png') no-repeat;
    background-size: cover;
    background-position: 0;

    .account-wrap {
      position: absolute;
      right: 14%;
      top: 40%;
      transform: translateY(-50%);

      .login-mobile {
        background: #ffffff;
        box-shadow: 0px 20px 60px rgba(123, 61, 224, 0.1);
        border-radius: 8px;
        position: relative;
        width: 350px;
        color: #444444;
        padding: 34px 32px 40px;
        display: inline-block;
        z-index: 1;
        box-sizing: border-box;

        .account-header {
          font-size: 20px;
          line-height: 24px;
          font-weight: 600;
          color: #333;
          margin-bottom: 20px;
        }

        .account-form {
          margin-top: 30px;

          .account-input-row {
            margin-bottom: 25px;
          }

          .code-input-row {
            position: relative;

            .send-code {
              position: absolute;
              right: 10px;
              top: 8px;
              z-index: 1;
              cursor: pointer;
              color: #999;
            }
          }
        }

        .login-btn {
          width: 100%;
        }
      }
    }
  }
</style>
